import {
    reqLogout,
    reqDeleteUser,
    reqUserList
} from '../../api/index'
import {
    getUser,
    removeToken,
    removeUser
} from "../../utils/storageUtils";
import render from './index.art'


/* 
获取指定页码的用户列表显示
*/
async function getUsers(page) {
    // 每页5条数据
    const limit = 5;
    // 请求获取指定页码的分页数据
    const result = await reqUserList(page, limit);
    const {
        users,
        total
    } = result.data
    console.log(users);
    // 计算出页码数
    const pageCount = Math.ceil(total / limit)
    // 得到登陆用户的用户名
    const {
        username
    } = getUser()
    // 渲染模板, 生成html
    const html = render({
        users,
        page,
        pageCount,
        total,
        username
    })
    //插入页面中
    document.getElementById('app').innerHTML = html

    handleClickLogout()
    handleClickDelete(page)
}

// 添加到window上  ==> 让模板中可以直接调用
window.getUsers = getUsers

// 初始获取第一页显示
getUsers(1)
/* 
处理点击退出登陆
*/
const handleClickLogout = () => {
    document.getElementById('logout').onclick = async () => {
        // 请求退出接口
        await reqLogout()
        //清除保存的token和user
        removeToken()
        removeUser()
        //成功后,跳转到登录页面
        window.location = '/login.html'
    }
}

/* 
处理点击删除
*/
function handleClickDelete(page) {
    document.getElementsByName('deleteBtn').forEach(btn => {
        btn.onclick = async (e) => {
            // 得到标签上的data自定义属性
            const {
                id,
                username
            } = e.target.dataset
            //显示确定框
            if (window.confirm(`确定删除 ${username}吗?`)) {
                //请求删除
                await reqDeleteUser(id)
                //成功后,重新获取列表显示
                getUsers(page)
            }
        }
    })
}